<template>
	<div class="view">
		<div class="page-game">
			<div class="m-head">
				<div class="game-level">
					<div class="stars">
						<span v-for="(item,index) in levelInfo.star" :key="index"></span>
					</div>
					<div class="level-title">{{levelInfo.name}}</div>
					<u-select bottom class="level-select" placeholder="选择难度" v-model="levelModel">
						<div class="u-select_dropdown_title" slot="title">请选择难度</div>
						<u-option value="选择难度" :label="item.star" v-for="(item,index) in levelList" :key="index">
							<div class="leveli">
								<div class="stars"><span v-for="(star, starInd) in item.star" :key="starInd"></span></div>
								<div class="name">{{item.name}}</div>
							</div>
						</u-option>
					</u-select>
				</div>
			</div>
			<div class="m-con clearfix">
				<div class="box-list" v-for="(item, index) in gameList" :key="index" @click="clickGame(item)">
					<div class="index">{{index+1}}</div>
					<div class="name">{{item.themeName}}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import * as api from '@/api/index';
import { debounce} from '@/utils/common.js'

export default {
	name: 'gameIndex',
	data () {
		return {
			userId: this.$store.state.userId,
			levelInfo:{},
			levelList:[],					//主题难度列表
			levelModel: 1,
			gameList:[]
		
		}
	},
	created:function() {
		if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
		let levelModel = sessionStorage.getItem('levelModel')
		this.levelModel = levelModel?levelModel:1
		this.getInit()
	},
	mounted:function(){
	},
	watch:{
		levelModel(data){
			this.levelList.forEach(item => {
				if(item.id == data)
					this.levelInfo = item
			})
			sessionStorage.setItem("levelModel",data)
			this.getThemeList()
		}
	},
	methods:{
		goBack(){
			window.removeEventListener('popstate', this.goBack, false);
			this.$router.push({path:'/preliminary'})
		},
		/*****
		 * 获取主题难度列表
		 * ****/ 
		async getInit(){
			var data = {
				userId: this.userId
			}
			var res = await api.getThemeTypeList(data)
			if(res.resultCode == 1){
				this.levelList = res.value? res.value:[]
				this.levelList.forEach(item => {
					this.$set(item,'star',Number(item.id))
					if(item.id == this.levelModel)
						this.levelInfo = item
				})
				this.getThemeList()
			}
		},
		/*****
		 * 获取主题列表
		 * ****/ 
		async getThemeList(){
			var data = {
				themeType: this.levelModel,							//难度等级
				userId: this.userId,					//用户id
			}
			var res = await api.getThemeList(data)
			if(res.resultCode == 1){
				this.gameList = res.value?res.value:[]
			}
		},
		
		clickGame(item){
			this.$store.dispatch("setRoomInfo",item)
			this.$router.push({path:'gameMatch',query:{themeId:item.themeId}})
		},
	}
}
</script>
